<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <meta name="description" content="一个做教育的平台" />
    <meta name="Keywords" content="教育,培训,学习,职业培训,培训网,培训中心,培训课程,在线培训,学历认证," />
    <!-- 引入网站的图标 -->
    <link href="favicon.ico" rel="shortcut icon" />
    <!-- 引入CSS初始文件 -->
    <link href="./base.css" rel="stylesheet" />
    <!-- 学成在线首页样式 -->
    <link href="./index.css" rel="stylesheet" />
</head>
<body>
    <!-- 头部 start -->
    <header>
        <!-- logo -->
        <div class="logo">
            <a href="#" title="学成在线首页">学成在线</a>
        </div>
        
        <!-- nav 导航 -->
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </nav>

        <!-- 搜索框 -->
        <div class="search">
            <input type="search" name="" placeholder="请输入关键字"><button></button>
        </div>

        <!-- 个人中心 -->
        <div class="personal">
            <span>个人中心</span>
            <span class="alarm">
                <img src="../学成在线项目-材料包/images/ld.png" height="18px" width="15px" alt="">
                <span></span>
            </span>
            <span class="avatar">
                <img src="../学成在线项目-材料包/images/pic.png" height="36px" width="36px" alt="">
                刘德华 Andy
            </span>
        </div>
    </header>
    <!-- 头部 end -->

    <!-- Banner -->
    <div class="banner">
        <div class="inner">
            <!-- 侧边导航栏 -->
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                </ul>
            </div>

            <!-- 圆点 -->
            <ul class="circle">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

            <!-- 我的课程表 -->
            <div class="timebook">
                <dl>
                    <dt>我的课程表</dt>
                    <dd>
                        <ul>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 使用对象</p>
                            </li>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 使用对象</p>
                            </li>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 使用对象</p>
                            </li>
                        </ul>
                        <a href="#" class="all">全部课程</a>
                    </dd>
                </dl>
            </div>
        </div>

        <!-- <div class="navtop"> -->
            
            
        <!-- </div> -->
    </div>

    <!-- 精品推荐 -->
    <div class="recommend">
    		<div class="rec-l">
    			<strong>精品推荐</strong>|
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    		</div>
    		<em>修改兴趣</em>
    </div>

    <!-- 精品产品 -->
    <div class="products">
     	 <div class="pro-hd">
     	 	 <h4>精品推荐</h4>
     	 	 <a href="#">查看全部</a>
     	 </div>
     	 <div class="pro-bd clearfix">
     	 	<ul>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="../学成在线项目-材料包/images/pic1.png">
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		
     	 	</ul>
     	 </div>
     </div>
     <footer>
     	 <div class="w">
     	 	<div class="footer-l">
     	 		<img src="../学成在线项目-材料包/images/logo.png" height="42" width="195" alt="">
     	 		<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
     	 		<a href="#" id="">下载APP</a>
     	 	</div>
     	 	<div class="footer-r">
     	 		<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>
     	 		<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>
     	 		<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>
     	 	</div>
     	 </div>
     </footer>
</body>
</html>